<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>拖曳排序插件</title>
        <link href="style17.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我最喜欢的运动</span>
            </div>
            <div class="content">
                <ul>
                    <li>1)足球</li>
                    <li>2)散步</li>
                    <li>3)篮球</li>
                    <li>4)乒乓球</li>
                    <li>5)骑自行车</li>
                </ul>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("ul").sortable({
                    delay:2,
                    opacity:0.25

            
                })
            });
        </script>
    </body>
    <br/>

<br/>
    <h4>
        拖曳排序插件——sortable

拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为：

$(selector).sortable({options});

selector参数为进行拖曳排序的元素，options为调用方法时的配置对象，
    </h4>
</html>